<template>
  <div v-if="tabbarShow" class="tabbarArea">
    <div class="tabbar-placeholder" :style="'height:' + tabbar.common.height + 'rpx;'"></div>
    <div class="myTabbar" :style="tabbarStyle">
      <div class="myTabbarItem" v-for="(link, index) in tabbar.common.links" :key="index">
        <myTabbarItem :link="link" :index="index" :tabbar="tabbar" @tabbarTap="tabbarTap"></myTabbarItem>
      </div>
    </div>
  </div>
</template>

<script>
import myTabbarItem from './myTabbarItem.vue';
export default {
  components: { myTabbarItem },
  props: {
    comIndex: null,
    curPageCid: null
  },
	data(){
		return {
			tabbar: null
		}
	},
  computed: {
		tabbarShow() {
			if(!this.tabbar){
				return false
			}
			var flag0 = Boolean(this.tabbar.common.isHidden)
			var flag1 = this.tabbar.common.links.some(link=>link.pageId===this.curPageCid)
			var flag2 = this.comIndex === '-1'
			return (flag1 || flag2) && !flag0
		},
		tabbarStyle() {
			if(!this.tabbar){
				return ''
			}
			return 'background-color:' + this.tabbar.common.bgColor + ';height:' + this.tabbar.common.height + 'rpx;'
		},
	},
  created(){
    uni.$on('tabChange', this.onTabChange)
  },
  beforeDestroy(){
    uni.$off('tabChange')
  },
  methods: {
    tabbarTap(index, pageId, broadP) {
			if(this.tabbar.common.originSelectIndex === index){
				return
			}
			this.tabbar.common.originSelectIndex = index
			this.$emit('tabbarTap',index, pageId, broadP)
		},
    // 当接收到tabChange事件时
		onTabChange(params, broadP) {
			var index = params.index * 1;
			var pageId = this.tabbar.common.links[params.index].pageId;
			this.tabbarTap(index, pageId, broadP);
		}
  }
}
</script>
<style lang="less" scoped>
.tabbar-placeholder{
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: content-box;
}
.myTabbar {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: content-box;
	position: fixed;
	width: 100%;
	z-index: 910;
	bottom: 0;
	left: 0;
	&::before {
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		background-color: #c8c7cc;
		position: absolute;
		top: -1px;
		left: 0;
	}
	.myTabbarItem {
		height: 100%;
		flex: 1;
	}
}
</style>